<template>
  <div>
    <Popup :show="show" @close="close" :close="true">
      <div class="login-warp">
        <!-- <div class="login-hint">
          <i class="iconfont icon-iconcopy"></i> 鬼见筹不会以任何理由要求您转账汇款，谨防诈骗。
        </div> -->
        <div class="login-nav">
          <div class="nav-item"
               :class="{'active':isLogin}"
               @click="isLogin=true">
            <span>登录</span>
          </div>
          <div class="nav-item"
               :class="{'active':!isLogin}"
               @click="isLogin=false">
            <span>注册</span>
          </div>
        </div>
        <div class="inp-warp">
          <LoginWarp v-if="isLogin" />
          <registerWarp v-else @success="registeSuccess" />
        </div>

      </div>
    </Popup>

  </div>
</template>

<script>
import Popup from 'components/common/popup/Popup'
import LoginWarp from './comps/LoginWarp'
import registerWarp from './comps/RegisterWarp'




export default {
  components: {
    Popup,
    registerWarp,
    LoginWarp
  },
  data() {
    return {
      isLogin: true
    }
  },
  props: {
    show: {
      type: Boolean,
      default: false
    }
  },
  methods:{
    close(){
      this.$emit('loginClose')
    },
    registeSuccess(){
      this.isLogin = true
    },
   
  },
  created(){

    // 开始监听登录组件的登录事件



  }
}
</script>

<style scoped>
.login-warp {
  width: 400px;
  padding-bottom: 30px;
}
.nav-item {
  flex: 1;
  text-align: center;
  font-size: 20px;
  font-weight: 600;
  cursor: pointer;
}
.nav-item:hover {
  color: rgb(228, 57, 60);
}
.active {
  color: rgb(228, 57, 60);
}
.login-nav {
  display: flex;
  border-bottom: 1px solid rgb(244, 244, 244);
  padding-bottom: 20px;
}
/* 提示语 */
.login-hint {
  background-color: rgb(255, 248, 240);
}
</style>